<!-- 折线图 -->
<style lang="stylus" scoped>
.danweimultipless
  height 100px
  background-size 100% 100%
  .main
    width 100%
    height calc(100% - 100px)
    margin-top -15px
</style>


<template>
<div class="danweimultipless">
  <p class='titledanweimultipless' style='font-family:微软雅黑;font-size:16px;color:#0B903C;font-weight:bold;line-height:50px;'>医院、宗教分布</p>
  <div class="main"></div>
</div>

</template>

<script>
import echarts from 'echarts'
import header from 'components/header/header'
import filter from 'components/filter/filter'
import axios from 'axios'
export default {
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      styleArr: [],
      myChart: {},
      name: ''
    }
  },
  watch: {
    too(val, oldVal) {
      console.log("watch=", val, oldVal)
    }
  },
  methods: {
    intclick() {
      console.log(global.token)
    },
    intchange() {
    },
    _init() {
      this.legendArr = this.myChart.getOption().series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      this.$root.charts.push(this.myChart)
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    }
  },
  components: {
    'v-header': header,
    'v-filter': filter
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.querySelector('.danweimultipless .main'))
    this.myChart.on("click", function(params) {
      // localStorage.setItem('areaname', params.name)
      // location.href = "/pingdingshan/vue/#/anzhibangs?areaname=" + params.name;
    })
    axios.get(this.GLOBAL.BASE_URL + '/a/sys/area/danweiData?name=平顶山市').then((res) => {
    // axios.get('static/data/Datas.json').then((res) => {
      if (res) {
        var arr = [];
        var danweichindex1;
        var danweichindex2;
        var danweiarr1 = [];
        var danweiarr2 = [];
        var countarr = [];
        var danweich = res.data[0]['danweich'].split(",");
        danweich.pop();
        $(danweich).each(function(index) {
          if (this === '医院') {
            var danweichindex1 = index;
          } else if (this === '寺观教堂') {
            var danweichindex2 = index;
          }
        })
        $(res.data).each(function() {
          if (this.name !== "平顶山市") {
            arr[arr.length] = this.name;
            countarr = this.danweicharactcount.split(",");
            countarr.pop()
            if (danweichindex1) {
              danweiarr1[danweiarr1.length] = counttarr[danweichindex1];
            } else {
              danweiarr1[danweiarr2.length] = 0;
            }
            if (danweichindex2) {
              danweiarr2[danweiarr2.length] = danweiarr2[danweichindex2];
            } else {
              danweiarr2[danweiarr2.length] = 0;
            }
          }
        })
        localStorage.setItem('areadata', JSON.stringify(res.data));
        this.myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['医院', '寺观教堂']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#00AA5E'
                }
              },
              axisLabel: {
                rotate: 50,
                textStyle: {
                  color: 'rgba(11, 144, 60, 1)',
                  fontWeight: 'bold',
                  fontSize: '10'
                }
              },
              type: 'category',
              data: arr,
              splitLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#00AA5E'
                }
              },
              axisLabel: {
                textStyle: {
                  color: 'rgba(11, 144, 60, 1)',
                  fontWeight: 'bold',
                  fontSize: '10'
                }
              },
              type: 'value',
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '医院',
              type: 'bar',
              data: danweiarr1,
              itemStyle: {
                normal: {
                  barBorderRadius: [5, 5, 0, 0],
                  label: {
                    formatter: function (params) {
                      if (params.value > 0) {
                        return params.value;
                      } else {
                        return "";
                      }
                    },
                    show: true,
                    color: '#00AA5E',
                    position: 'top',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            {
              name: '寺观教堂',
              type: 'bar',
              data: danweiarr2,
              itemStyle: {
                normal: {
                  barBorderRadius: [5, 5, 0, 0],
                  label: {
                    formatter: function (params) {
                      if (params.value > 0) {
                        return params.value;
                      } else {
                        return "";
                      }
                    },
                    show: true,
                    color: '#00AA5E',
                    position: 'top',
                    fontWeight: 'bold'
                  }
                }
              }
            }
          ]
        });
        this._init()
      }
    });
  }
}
</script>
